<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>cultural heritage</title>
    <script src="js/vue.js"></script>


    <link rel="stylesheet" href="css/style-starter.css">
    <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
   <!-- navigation -->
 <header class="navigation">
    <div class="container" id="index">
      <nav class="navbar navbar-expand-lg navbar-white">
        <a class="navbar-brand order-1" href="index.html">
          <img class="img-fluid" width="50px" src="images/图标.png"
            alt="中国传统文化论坛">
        </a>
        <div class="collapse navbar-collapse text-center order-lg-2 order-3" id="navigation">
          <ul class="navbar-nav mx-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">首页</a>
            </li>
            <li class="nav-item @@about__active">
              <a class="nav-link" href="BBS_index.html">论坛</a>
            </li>
            <li class="nav-item @@services__active">
              <a class="nav-link" href="chat.html">消息</a>
            </li>
            <li class="nav-item @@services__active">
              <a class="nav-link" href="shop.html">商店</a>
            </li>
          </ul>
        </div>
        <div class="order-2 order-lg-3 d-flex align-items-center">
          <form @submit.prevent="performSearch"> <!-- 阻止表单提交 -->
            <input 
              id="search-query" 
              name="s" 
              type="search" 
              placeholder="输入文章ID"
              v-model="searchId" 
            >
            <button type="submit" class="btn btn-search">搜索</button>
          </form>
          <button class="navbar-toggler border-0 order-1" type="button" data-toggle="collapse" data-target="#navigation">
            <i class="ti-menu"></i>
          </button>
          <ul class="navbar-nav ml-auto" v-if="userid==null">
            <li class="nav-item @@login__active">
                <a class="nav-link" href="Login.html">登录</a>
            </li>
            <li class="nav-item @@register__active">
                <a class="nav-link" href="register.html">注册</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto 1ogined" v-else>
            <li class="nav-item @@login__active">
              <span><a class="nav-link" href="person-post.html">{{userid}}</a></span>
            </li>
            <li class="nav-item @@register__active">
                <span v-on:click.prevent="logout"><a class="nav-link" href="BBS_index.html">注销</a></span>
            </li>
        </ul>
        </div>
      </nav>
    </div>
  </header>
  
  
    <!--引导程序-->
    <script src="js/jquery-3.3.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <!--/MENU-JS-->
    <script>
        new Vue({
          el: "#index",
          data: {
            userid: localStorage["userid"],
            searchId: '' // 用于存储搜索的ID
          },
          methods: {
            logout: function() {
              localStorage.clear();
              this.userid = null;
            },
            performSearch: function() {
              if (!this.searchId || this.searchId.trim() === '') {
                // 如果为空，跳转到404页面
                alert("请输入文章id")
                return;
              }
              // 存储搜索ID到localStorage
              localStorage.setItem("num", this.searchId);
              // 跳转到post.html
              location.href = "post.html";
            }
          }
        })
    </script>
    <!--//MENU-JS-->

    <section class="w3l-main-slider" id="home">
        <!--main slider-->
        <div class="companies20-content">
            <div class="owl-one owl-carousel owl-theme">
                <div  class="item text-center">
                    <li>
                        <div class="slider-info banner-view bg bg2" data-selector="bg.bg2">
                            <div class="banner-info">
                                <div class="container">
                                    <div class="banner=info-bg mr-auto">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
                <div class="item text-center">
                    <li>
                        <div class="slider-info  banner-view banner-top1 bg bg2" data-selector="bg.bg2">
                            <div class="banner-info">
                                <div class="container">
                                    <div class="banner=info-bg mr-auto">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
                <div class="item text-center">
                    <li>
                        <div class="slider-info  banner-view banner-top2 bg bg2" data-selector="bg.bg2">
                            <div class="banner-info">
                                <div class="container">
                                    <div class="banner=info-bg mr-auto">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </div>
            </div>
        </div>
        <script src="js/owl.carousel.js"></script>
        <!-- script for -->
        <script>
          $(document).ready(function () {
            $('.owl-one').owlCarousel({
              loop: true,
              margin: 0,
              nav: false,
              responsiveClass: true,
              autoplay: false,
              autoplayTimeout: 5000,
              autoplaySpeed: 1000,
              autoplayHoverPause: false,
              responsive: {
                0: {
                 items: 1,
                 nav: false
                },
                480: {
                 items: 1,
                 nav: false
                },
                667: {
                 items: 1,
                 nav: true
                },
                1000: {
                 items: 1,
                 nav: true
                }
             }
            })
          })
        </script>
        <!-- //script -->
        <!-- /main-slider -->
    </section>

    <section class="w3l-teams-15">
        <div class="team-single-main ediContent">
            <div class="container">
                <div class="row">
                    <div class="column2 col-lg-6">
                        <img src="images/winter.jpg" alt="product" class="img-responsive">
                    
                    </div>
                    <div class="nature-row  coloum4 col-lg-6">
                        <h6 class="small-title">2024.11.08</h6>
                        <h3>知节气 识茶事 和天下丨立冬：氤氲茶香暖岁寒</h3>
                        <p class="para editContent text ">二十四节气与中国人的制茶、饮茶传统，都是中国人探索自然宇宙、认知生命健康过程中形成的文化智慧。二十四节气反映了四时更替，指导着农事活动、影响着千家万户的衣食住行。茶叶的种植、采摘、制作、饮用和相关观念与习俗，都与二十四节气密不可分，各个节气给予了茶不同的滋味和功效。</p>
                        <a href="http://www.ichtianjin.com/portal/category/read/?id=1107" class="action-button btn mt-lg-5 mt-4">查看更多</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="w3l-clients" id="client">
        <div class="call-w3">
            <div class="container text-center">
                <div class="title-head">
                    <h3>论坛</h3>
                    <p>中国非物质文化遗产社区，欢迎来自各地的用户。用户可以参与发布感兴趣的话题，学习非遗相关知识，促进非遗文化发扬。</p>
                    <a class="btn btn-theme2 mt-lg-5 mt-4" href="BBS_index.html">进入论坛</a>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
      <div class="container">
          <div class="row align-items-center">
          <div class="col-md-5 text-center text-md-left mb-4">
              <ul class="list-inline footer-list mb-0">
                <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
              </ul>
          </div>
          <div class="col-md-2 text-center mb-4">
              <a href="index.html"><img class="img-fluid" width="100px" src="images/图标.png" alt="Reader | Hugo Personal Blog Template"></a>
          </div>
          <div class="col-12">
              <div class="border-bottom border-default"></div>
          </div>
          </div>
      </div>
      </footer>

    <button onclick="topFunction()" id="movetop" title="Go to top">
        <span class="fa fa-chevron-up"></span>
    </button>
    <script>
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
            scrollFunction()
        };
    
        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("movetop").style.display = "block";
            } else {
                document.getElementById("movetop").style.display = "none";
            }
        }
    
        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
    <!-- /move top -->

</body>
</html>